<template>
  <div class="container">
    <navBar :navBar="navBar"></navBar>
    <div class="content">
      <div class="item">
        <p class="title">{{ $t("证件类型") }}：</p>
        <input
          type="text"
          v-model="card_type"
          :placeholder="$t('请选择证件类型')"
          readonly
          @click="show = true"
        />
      </div>
      <div class="item">
        <p class="title">{{ $t("姓名") }}：</p>
        <input type="text" v-model="form.realname" :placeholder="$t('请输入姓名')" />
      </div>
      <div class="item">
        <p class="title">{{ $t("证件号码") }}：</p>
        <input type="text" v-model="form.cardno" :placeholder="$t('请输入证件号码')" />
      </div>
	  <div class="item">
	  <div class="title">{{ $t("证件正面") }}</div>
	  <div class="upload">
	    <van-uploader
	      :after-read="afterRead"
	      result-type="text"
	      v-if="!form.img1"
	    />
	    <img v-else :src="$basePath + form.img1" alt="" />
	  </div>
	  </div>
	  <div class="item">
	  <div class="title">{{ $t("证件反面") }}</div>
	  <div class="upload">
	    <van-uploader
	      :after-read="afterRead2"
	      result-type="text"
	      v-if="!form.img2"
	    />
	    <img v-else :src="$basePath + form.img2" alt="" />
	  </div>
	  </div>
      <div class="btn">
        <van-button type="info" block @click="submit">{{ $t("提交") }}</van-button>
      </div>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-picker
        :title="$t('证件类型')"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import navBar from "@/components/navBar.vue";
export default {
  name: "verified",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t("实名认证"),
        close: false,
        btn: "",
        isBlue: true,
      },
      form: {
        card_type: "",
        realname: "",
        cardno: "",
		img1:"",
		img2: "",
      },
      card_type: "",
      show: false,
      columns: [this.$t('身份证'),this.$t('护照'),this.$t('驾驶证')],
	  
    };
  },
  methods: {
    onConfirm(value, index) {
      this.form.card_type = index + 1;
      this.card_type = value;
      this.show = false;
    },
	afterRead(file) {
	  let files = new FormData();
	  files.append("file", file.file);
	  $uploadAxios(api.uploadImg, files, (res) => {
	    if (res.code == 0) {
	      this.form.img1 = res.save_path;
	    } else {
	      this.$toast(this.$t(res.msg));
	    }
	  });
	},
	afterRead2(file) {
	  let files = new FormData();
	  files.append("file", file.file);
	  $uploadAxios(api.uploadImg, files, (res) => {
	    if (res.code == 0) {
	      this.form.img2 = res.save_path;
	    } else {
	      this.$toast(this.$t(res.msg));
	    }
	  });
	},
    // 提交
    submit() {
      for (const key in this.form) {
        if (!this.form[key]) {
          this.$toast(this.$t("请将认证信息填写完整"));
          return false;
        }
      }
      $postAxios(api.authentication, this.form, (res) => {
        if (res.code == 0) {
          this.$toast(this.$t("等待审核"));
          setTimeout(() => {
            this.$router.go(-1);
          }, 600);
        } else {
          this.$toast(this.$t(res.msg));
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding-top: 40px;
  width: 100%;
  min-height: 100vh;
  height: 100%;
  box-sizing: border-box;
  background-color: #f7f6fb;
  .content {
    padding: 20px 15px;
    .item {
      margin-bottom: 10px;
      .title {
        margin-bottom: 10px;
        color: #000;
        font-size: 14px;
      }
	  .upload {
	    border-radius: 10px;
	    margin-top: 10px;
	    img {
	      width: 80px;
	      height: 80px;
	      // margin: 20px 0;
	    }
	  }
      input {
        padding: 0 15px;
        width: 100%;
        height: 36px;
        line-height: 36px;
        color: #000;
        font-size: 14px;
        display: block;
        box-sizing: border-box;
        border: none;
        border-radius: 25px;
      }
    }
    .btn {
      margin-top: 50px;
      .van-button {
        border-radius: 25px;
      }
    }
  }
}
</style>